<template>
  <div>
    <lan-header :config="headerConfig"></lan-header>
    <lan-search-form
      size="small"
      :config="searchForm"
      :formData="searchFormData"
      @search="search"
    ></lan-search-form>
    <add
      ref="addComponent"
      @refresh="search"
    ></add>
  </div>
</template>

<script>
import Add from './add';
import lanSearchForm from '../../../components/lanSearchForm';
import lanHeader from '../../../components/lanHeader';
import { queryProductTypeListApi } from '../../../api/productType';
import { MomentFormat, SortType } from '../../../constants/common';
import { Message, MessageBox } from 'element-ui';
import { deleteAreaApi, getAreaListApi } from '../../../api/area';
import { parseError } from '../../../utils';

export default {
  components: {
    lanHeader,
    lanSearchForm,
    Add
  },
  props: {
    searchFormData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      headerConfig: {
        title: '参数列表',
        buttons: [
          {
            text: '新建',
            icon: 'add',
            type: 'primary',
            size: 'small',
            method: () => {
              this.showAdd();
            }
          }
        ]
      },

      searchForm: {
        inline: true,
        size: 'small',
        formList: [
          {
            name: 'name',
            type: 'input',
            placeholder: '参数名称'
          },
          {
            name: 'productTypeUuid',
            type: 'remoteSelect',
            options: () => this.deviceTypeList,
            optionValue: 'uuid',
            optionLabel: 'name',
            placeholder: '请选择产品类型',
            query: this.remoteDeviceTypeSearch
          },
          {
            name: 'active',
            type: 'select',
            options: () => this.activeOptionList,
            optionValue: 'value',
            optionLabel: 'label',
            placeholder: '允许升级'
          },
          {
            name: 'description',
            type: 'input',
            placeholder: '备注'
          }
        ]
      },
      deviceTypeList: [],
      activeOptionList: [
        {
          label: '允许',
          value: true
        },
        {
          label: '不允许',
          value: false
        }
      ]
    };
  },
  methods: {
    search() {
      this.$emit('search');
    },
    showAdd() {
      this.$refs.addComponent.showDialog();
    },
    remoteDeviceTypeSearch(name) {
      queryProductTypeListApi(name, 100)
        .then(
          res =>
            (this.deviceTypeList = res.map(deviceType => {
              return {
                uuid: deviceType.uuid,
                name: deviceType.name
              };
            }))
        )
        .catch(error => Message.error(parseError(error)));
    }
  }
};
</script>

<style>
</style>
